<template>
  <div class="equipment-view">
    <el-row class="equipment-search">
      <el-col :span="24">
        <el-input
          v-model="equipmentStore.pageDTO.name"
          style="width: 240px"
          placeholder="请输入装备名称"
        />
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="equipmentStore.getEquipmentPage()"
          round
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <el-row class="equipment-list">
      <template
        v-for="item in equipmentStore.equipmentPage.datas"
        :key="item.name"
      >
        <equipmentItem
          :equipmentName="item.name"
          :imgUrl="'/api/file/download/' + item.imgFileId"
          @imgClick="equipmentImageClick"
        />
      </template>
      <!-- <equipment-item equipmentName="11" imgUrl="11"/> -->
    </el-row>
    <el-row class="equipment-page">
      <el-col :span="12"> </el-col>
      <el-col :span="12">
        <el-pagination
          layout="prev, pager, next"
          :page-size="equipmentStore.equipmentPage.pageSize"
          v-model:current-page="equipmentStore.equipmentPage.pageNum"
          :total="equipmentStore.equipmentPage.total"
          @current-change="currentChange()"
        />
      </el-col>

      <el-dialog
        v-model="centerDialogVisible"
        title="操作"
        width="500"
        center
      >
        <span>
          操作
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="centerDialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>
    </el-row>
  </div>
</template>

<script setup>
import equipmentItem from "@/components/equipment-item.vue";
import { ref, onMounted } from "vue";
import { useEquipmentStore } from "@/stores/equipment";

const centerDialogVisible = ref(false)

const equipmentStore = useEquipmentStore();
onMounted(() => {
  equipmentStore.getEquipmentPage();
});
const currentChange = () => {
  equipmentStore.pageDTO.pageNum = equipmentStore.equipmentPage.pageNum;
  equipmentStore.getEquipmentPage();
};
function equipmentImageClick(str) {
  console.log(str);
  centerDialogVisible.value = true
}
</script>

<style lang="less">
.equipment-view {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  .equipment-search {
    height: 50px;
  }

  .equipment-list {
    min-height: 500px;
  }

  .equipment-page {
    height: 50px;
  }
}
</style>